<script setup lang="ts"></script>
<template>
  <!-- 页面右侧结构 -->
  <div class="content">
    <div class="div">
  <div class="ger">
    
  </div>
  <div class="safe">
    <div class="safe-con">
      <div class="safe-head">
        安全设置
      </div>
      <div class="safe-central">
        <div class="safe-login">
          <div class="safe-icon">
          <i class="iconfont icon-yisuo" />
          </div>
          <div class="login">
            <p class="login-above">登陆密码</p>
            <p class="login-under">建议您定期更换密码，设置安全性高的密码可以使帐号更安全</p>
          </div>
          <a href="javascript:;" class="safe-botton">更换</a>
        </div>
        <div class="safe-cell">
          <div class="safe-icon">
          <i class="iconfont icon-shouji" />
          </div>
          <div class="login">
            <p class="login-above">安全手机 180****49</p>
            <p class="login-under">安全手机可以用于登录帐号，重置密码或其他安全验证</p>
          </div>
          <a href="javascript:;" class="safe-botton">更换</a>
        </div>
        <div class="safe-bottom">
          <p class="title">安全服务提示</p>
          <p class="neir" style="width: 750px;"><i>·</i>  确认您登录的是小兔鲜儿网址，注意防范进入钓鱼网站，不要轻信各种即时通讯工具发送的商品或支付链接，谨防网购诈骗</p>
          <p class="neir"><i>·</i>   建议您安装杀毒软件，并定期更新操作系统等软件补丁，确保帐号及交易安全</p>
        </div>
      </div>
      
    </div>
  </div>
  <router-view></router-view>
</div>
</div>

</template>
<style scoped lang="less">
@import url(../../Layout/icons/iconfont.css);
  .ger{
    width: 227px;
    height: 1080px;
    background-color: #fff;
    margin-right: 18px;
  }
  .div{
    display: flex;
  }
  .content {
    width: 1240px;
    margin: 0 auto;
  }
  .safe {
    width: 995px;
    height: 1080px;
    background-color: #fff;
  }
  .safe-head {
    margin: 0 25px 0 25px;
    font-size: 16px;
    color: #333;
    width: 945px;
    line-height: 70px;
    border-bottom: 1px solid #f5f5f5;
  }
  .safe-central {
    width: 780px;
    margin: 0 auto;
    padding-top: 50px;
    .safe-login {
      height: 124px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .safe-icon {
        width: 90px;
        text-align: center;
        i {
          font-size: 32px;
          color: #27ba9b;
        }
      }
      .login {
        flex: 1;
        line-height: 30px
        
      }
      .login-above {
        font-size: 16px;
      }
      .login-under {
        color: #999;
      }
      a {
        width: 160px;
        height: 50px;
        background: #27ba9b;
        color: #fff;
        border-radius: 4px;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
      }
    }
  }

    .safe-cell {
      height: 124px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .safe-icon {
        width: 90px;
        text-align: center;
        i {
          font-size: 32px;
          color: #27ba9b;
        }
      }
      .login {
        flex: 1;
        line-height: 30px
        
      }
      .login-above {
        font-size: 16px;
      }
      .login-under {
        color: #999;
      }
      a {
        width: 160px;
        height: 50px;
        background: #27ba9b;
        color: #fff;
        border-radius: 4px;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
      }

    }
    .safe-bottom {
      height: 170px;
      width: 100%;
      background-color: #f5f5f5;
      margin-top: 40px;
      padding: 20px;
      color: #999;
      line-height: 30px;
      .title {
        line-height: 40px;
        color: #333;
      }
      .neir{
        display: flex;
        margin-left: 4px;
      i {
        display: inline-block;
        padding-right: 3px;
        font-size: 26px;
      }
      }
    }
  
</style>
